<template>
  <view class="search-bar">
    <image class="search-bar-icon" src="/static/index-search.png" />
    <view class="search-bar-text">搜索关键词</view>
    <view class="search-bar-btn">搜索</view>
  </view>
</template>

<style lang="scss">
.search-bar {
  display: flex;
  align-items: center;
  height: 64rpx;
  padding-left: 30rpx;
  padding-right: 20rpx;
  border-radius: 36rpx;
  border: 2rpx solid rgba(255, 121, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);

  .search-bar-icon {
    width: 32rpx;
    height: 32rpx;
  }

  .search-bar-text {
    flex-grow: 1;
    min-width: 0;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #999999;
  }

  .search-bar-btn {
    flex-shrink: 0;
    padding: 0 24rpx;
    margin-left: 20rpx;
    font-size: 24rpx;
    color: #ffffff;
    line-height: 46rpx;
    font-weight: bold;
    border-radius: 24rpx;
    background: linear-gradient(90deg, #f09027 0%, #ff7900 100%);
  }
}
</style>